<template>
	<div class="index">
		<!--<i class="fa fa-heart-o"></i>
		<i class="fa fa-heart"></i>-->
		<div class="loading">
			<loading :show="show1" style='z-index: 99;' :text="text1"></loading>
		</div>

		<a :href="target"><i class="fa fa-chevron-left"></i></a>

		<header style="background-image: url(../../static/img/sellerBg.jpg);">
			<div>
				<img :src="'http://localhost:2200'+seller.avatar" alt="" />
				<div>
					<span>{{seller.nickName}}</span>
					<div>
						<span>粉丝数 {{seller.follows}}</span>
						<span @click="likeSeller($event,seller._id)" v-if='!like'><i class="fa fa-heart-o"></i>关注</span>
						<span @click="likeSeller($event,seller._id)" v-if='like'><i class="fa fa-heart"></i>已关注</span>
					</div>
				</div>
			</div>
		</header>
		<h4>全部宝贝</h4>
		<div class="xu">
			<div>
				<span>排序：</span>
				<span @click="up">默认</span>
				<span>价格
					<i @click="up" v-if="xu" class="fa fa-long-arrow-up"></i>
					<i  @click="down" v-if="!xu" class="fa fa-long-arrow-down"></i>
				</span>
			</div>
		</div>
		<div v-if="goods.length<=0" class="noGoods">
			<p style="text-align: center;padding: 30px;color: #888888;">小店暂时还没有上货，客官稍后再来~</p>
		</div>
		<div class="good">
			<ul>
				<li v-for="(item,ins) in goods">
					<a :href="'#/good/info/' + item._id+'?seller='+seller._id">
						<img :src="'http://localhost:2200'+item.avatar[0]"/>
						<div>
						<p>{{item.name}}</p>
						<p>{{item.describe}}</p>
							<p><span>{{item.send | sendC}}</span></p>
						<p><span>¥</span>{{item.price}} <span>{{item.cellNum}}人已付款</span></p>
							
						</div>
					</a>
				</li>
				
			</ul>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import SellerTap from '../components/SellerTap'
	import { Loading } from 'vux'
	export default {
		data: function() {
			return {
				seller: null,
				like: false,
				goods: [],
				page: 1,
				buller: null,
				has: false,
				content: '',
				show1: true,
				text1: 'loading',
				start: '',
				end: '',
				xu: false,
	

			}
		},
		components: {
			SellerTap,
			Loading
		},
		watch: {
			'$route' (to, from) {
				console.log(to.path);
			}
		},
		filters: {
	
			sendC(value){
			
				if(value == true){
					return '包邮'
				}else{
					return ''
				}
				
				
			}
		},
		methods: {
			likeSeller(ev, seller_id) {
			
				if(!this.buller){
					return;
				}
				
				axios.get('/seller/like?seller_id=' + seller_id).then((result) => {
					
					if(result.data.msg == 'success'){
						this.like = !this.like;
					}
					this.seller = result.data.seller;
					
				}).catch((err) => {
					console.log(err);
				})
			},
			up: function() {
				this.start = '';
				this.end = '';
				this.page = 1;
				this.has = false;
				this.xu = false;
				var that = this;
				axios.get('/seller/myGoods?sheng=true').then(function(result) {

					that.data = result.data.data
				}).catch(function(err) {
					console.log(err)
				})

			},
			down: function() {
				this.start = '';
				this.end = '';
				this.page = 1;
				this.has = false;
				this.xu = true;
				var that = this;
				axios.get('/seller/myGoods?sheng=false').then(function(result) {

					that.data = result.data.data
				}).catch(function(err) {
					console.log(err)
				})

			},
		},
		mounted() {
			
			
			if(this.$route.query.type=='follow'){
				this.target = '#/buller/follow'
			}else if(null){
				
			}else{
				this.target = '#/'
			}
			
			var store_id = this.$route.params.id;
			
			console.log(store_id)
			axios.get('/buller/checkFollow?store_id='+store_id).then((result) => {

				this.like = result.data.follow;


			}).catch((err) => {
				console.log(err);
			})
			
			
			axios.get('/seller/getInfo?seller_id='+store_id).then((result) => {

				this.seller = result.data.data;
			}).catch((err) => {
				console.log(err);
			});

			axios.get('/buller/checkLogin').then((result) => {

				this.buller = result.data.data;

			}).catch((err) => {
				console.log(err);
			})

			var that = this;
			axios.get('/seller/sellerGoods?seller_id='+store_id).then(function(result) {

				that.goods = result.data.data;
								console.log(result.data.data)

			}).catch(function(err) {
				console.log(err)
			})

			$(document).on('scroll', window, function() {
				var countH = $(document).outerHeight();
				var scrH = $(window).scrollTop();
				var winH = $(window).height();
				//				console.log(countH, winH, scrH);
				if(!that.has) {

					if((scrH + winH) > (countH - 3)) {
						that.page += 1;

						that.has = true;

						axios.get("/seller/sellerGoods?page=" + that.page + '&sheng=' + !that.xu + '&start=' + that.start + '&end=' + that.end+'&seller_id='+store_id).then(function(result) {
							if(result.data.data.length<=0){
								return;
							}
							$('.loading').fadeIn();
							setTimeout(function() {
								$('.loading').fadeOut(function() {
									result.data.data.forEach(function(item) {

										that.has = false;
										that.goods.push(item);
									})
								});
							}, 500)

						}).catch(function(err) {
							console.log(err)
						})

					}
				}

			})

		},
	}
</script>

<style scoped>
	.loading {
		position: absolute;
		/*background: rgba(0,0,0,.5);*/
		width: 100%;
		height: 100%;
		z-index: 200;
		display: none;
	}
	
	.index>a {
		top: 10px;
		left: 13px;
		text-align: center;
		background: rgba(255, 255, 255, .3);
		width: 30px;
		line-height: 30px;
		border-radius: 50%;
		color: #eee;
		position: absolute;
		z-index: 200;
	}
	
	header {
		height: 150px;
		background-repeat: no-repeat;
		background-size: 100% 110%;
		position: relative;
		color: white;
	}
	
	header>div {
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 0;
		overflow: hidden;
		padding: 5px 10px;
	}
	
	header>div>img {
		float: left;
		width: 50px;
		height: 50px;
		border-radius: 5%;
		margin-right: 10px;
		position: relative;
		top: -2px;
	}
	
	header>div>div>div {
		float: right;
	}
	
	header>div>div>div>span:first-child {
		padding: 2px 7px;
		background: rgba(0, 0, 0, .7);
		border-radius: 5%;
		line-height: 30px;
		font-size: 14px;
	}
	
	header>div>div>div>span:last-child {
		display: inline-block;
		text-align: center;
		width: 90px;
		background: orangered;
		line-height: 30px;
		border-radius: 10%;
		cursor: pointer;
		font-size: 15px;
	}
	header>div>div>div>span:last-child i{
		margin-right: 4px;
	}
	h4 {
		background: #EEEEEE;
		text-align: center;
		font-weight: normal;
		line-height: 31px;
		color: #666;
	}
	
	
	.fen1 {
		padding: 5px 10px;
		background: #eee;
	}
	
	.fen1 span {
		color: red;
	}
	
	.xu {
		margin: 20px 20px;
		padding: 3px 10px;
		background: #eee;
		overflow: hidden;
	}
	
	.xu div {
		float: right;
		cursor: pointer;
	}
	
	.xu div span:nth-child(2) {
		color: red;
		cursor: pointer;
	}
	
	.xu div i {
		display: inline-block;
		padding: 0 3px;
		cursor: pointer;
	}
	
	
	
	.good ul{
		overflow: hidden;
		
	}
	.good ul li{
		width: 100%;
		height: 180px;
		overflow: hidden;
		border-bottom: ;
	
	}
	.good ul li img{
		float: left;
		width: 40%;
		height:80%;
		margin-top: 5%;
	
	}
	.good ul li div{
		float: left;
		width: 60%;
		height: 100%;
		padding: 7% 1%;
		border-bottom:solid 1px #EEEEEE ;
		
		
	}.good ul li p{
		line-height: 18px;
		width: 100%;
		word-wrap: break-word;
		margin: 2px 0;
	}
	.good ul li div p:nth-child(1){
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.good ul li div p:nth-child(2){
		height: 30%;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 13px;
		color: #777;
	}
	
	.good ul li div p:nth-child(3) span{
		padding: 0px 2px;
		border: solid 1px goldenrod;
		border-radius: 12%;
		margin-right: 5px;
		font-size: 11px;
		color: goldenrod;
	}
	.good ul li div p:nth-child(4){
		color: red;
		font-size: 18px;
	}
	.good ul li div p:nth-child(4) span:first-child{
		font-size: 10px;
		
	}
	.good ul li div p:nth-child(4) span:last-child{
		font-size: 12px;
		color: #888;
		margin-left: 5px;
	}
	.good ul li div p:nth-child(5) a{
		display: block;
		width: 100%;
		color: #888;
		font-size: 13px;
	}
	.good ul li div p:nth-child(5) a span{
		color: #666;
		margin-left: 2%;
	}
	.good ul li div p:nth-child(5) a i{
		font-weight: 400;
		font-size: 10px;
		position: relative;
		top: -1px;
	}
	
</style>